<template>
  <el-card class="container questions">
    <el-row class="header">
      <el-col class="top_title">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" @click="$router.push('/questions/new')">新增试题</el-button>
      </el-col>
    </el-row>
    <el-form :model="formData" label-position="right" label-width="80px" class="demo-form-inline">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select style="width:100%;" v-model.number="formData.subjectID" placeholder="请选择">
              <el-option v-for="v in subjectList" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select style="width:100%;" v-model.number="formData.catalogID" placeholder="请选择">
              <el-option v-for="v in secondaryDirectoryListing" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select style="width:100%;" v-model.number="formData.tags" placeholder="请选择">
              <el-option v-for="v in tagsList" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model.trim="formData.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <!-- 试题类型 -->
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select style="width:100%;" v-model.number="formData.questionType" placeholder="请选择">
              <el-option v-for="v in questionType" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 难度 -->
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select style="width:100%;" v-model.number="formData.difficulty" placeholder="请选择">
              <el-option v-for="v in difficulty" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 方向 -->
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select style="width:100%;" v-model="formData.direction" placeholder="请选择">
              <el-option v-for="v in direction" :key="v" :label="v" :value="v"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select style="width:100%;" v-model.number="formData.creatorID" placeholder="请选择">
              <el-option v-for="v in userList" :key="v.id" :label="v.username" :value="v.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model.trim="formData.remarks" placeholder="审批人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model.trim="formData.shortName" placeholder="审批人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" class="flex50">
            <el-select v-model="formData.province" placeholder="请选择">
              <el-option v-for="v in provincesSY" :key="v.city" :label="v.city" :value="v.city"></el-option>
            </el-select>
            <el-select v-model="formData.city" placeholder="请选择">
              <el-option v-for="v in citys" :key="v" :label="v" :value="v"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button @click="remove" class="left156" size="small">清除
          </el-button>
          <el-button @click="searchBtn" size="small" type="primary">
            搜索
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="全部"></el-tab-pane>
      <el-tab-pane label="待审核" name="待审核"></el-tab-pane>
      <el-tab-pane label="通过" name="通过"></el-tab-pane>
      <el-tab-pane label="拒绝" name="拒绝"></el-tab-pane>
    </el-tabs>
    <el-row>
      <el-alert :title='`数据一共 ${counts} 条`' type="info" show-icon>
      </el-alert>
    </el-row>
    <!-- 表格  -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column width="180" prop="number" label="试题编号"></el-table-column>
      <el-table-column width="180" prop="subject" label="学科"></el-table-column>
      <el-table-column width="180" prop="catalog" label="目录"></el-table-column>
      <el-table-column width="180" prop="questionType" label="题型"></el-table-column>
      <el-table-column width="180" label="题干" min-width="280px">
        <template slot-scope="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column width="180" label="录入时间" prop="addDate">
        <template slot-scope="{ row }">
          {{ parseTime(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column width="180" prop="difficulty" label="难度"></el-table-column>
      <el-table-column width="180" prop="creator" label="录入人"></el-table-column>
      <el-table-column width="180" prop="chkState" label="审核状态"></el-table-column>
      <el-table-column width="180" prop="chkRemarks" label="审核意见"></el-table-column>
      <el-table-column width="180" prop="chkUser" label="审核人"></el-table-column>
      <el-table-column width="180" prop="publishState" label="发布状态"></el-table-column>
      <el-table-column class="link" label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-link class="table_btn" :underline="false" type="primary" @click=";(preview = true), (currentId = row.id)">预览
          </el-link>
          <el-link class="table_btn" :underline="false" :type="row.chkState !== '待审核' ? 'info' : 'primary'" :disabled="row.chkState !== '待审核'" @click=";(auditDialog = true), (currentId = row.id)">审核
          </el-link>
          <el-link class="table_btn" :underline="false" :type="row.publishState === '已发布' ? 'info' : 'primary'" :disabled="row.publishState === '已发布'" @click="$router.push(`/questions/new?id=${row.id}&or=choice`)">修改
          </el-link>
          <el-link class="table_btn" :underline="false" type="primary" @click="shelvesFn(row.id, row.publishState)">{{ row.publishState === '已发布' ? '下架' : '上架' }}
          </el-link>
          <el-link class="table_btn" :underline="false" @click="deleteItem(row.id)" :type="row.publishState === '已发布' ? 'info' : 'primary'" :disabled="row.publishState === '已发布'">删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formData.page" :page-sizes="[2, 5, 10, 20]" :page-size="formData.pagesize" layout="prev, pager, next, sizes, jumper" :total="counts">
    </el-pagination>
    <!-- 删除/加入精选弹出层 -->
    <el-dialog title="提示" :visible.sync="dialog.visible" width="30%" :before-close="dialogClose">
      <el-alert class="whiteBGC" :title="dialog.title" :type="dialog.type" show-icon :closable="false" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="dialogPerform">确定</el-button>
      </span>
    </el-dialog>
    <!-- 题目预览弹出层 -->
    <el-dialog title="题目预览" :visible.sync="preview" width="80%">
      <questions-preview v-if="preview" :id="currentId"></questions-preview>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="preview = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 待审核弹出层 -->
    <el-dialog class="auditDialog" title="题目审核" :visible.sync="auditDialog" :before-close="handleClose" width="40%">
      <el-radio v-model="auditObj.chkState" :label="1">通过</el-radio>
      <el-radio v-model="auditObj.chkState" :label="2">拒绝</el-radio>
      <el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="auditObj.chkRemarks">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="auditFn">确定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { parseTime } from '@/utils'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provincesSY } from '@/api/hmmm/citys'
import {
  getChoiceDataList,
  getSubjectList,
  getDirectoryList,
  getTagsList,
  getUserList,
  remove,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questionsListSY'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: { QuestionsPreview },
  data () {
    return {
      activeName: '全部', // 全部 待审核 通过 拒绝
      counts: 0, // 总数
      parseTime,
      formData: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: '', // 学科 id
        catalogID: '', // 目录 id
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        chkState: '' // 0 待审核 1 通过 2 拒绝 核状态
      },
      subjectList: [], // 分类列表
      secondaryDirectoryListing: [], // 二级目录列表
      tagsList: [], // 标签列表
      questionType, // 类型
      difficulty, // 难度列表
      direction, // 方向列表
      userList: [], // 用户列表
      provincesSY, // 全国声城市数据
      citys: [], // 城市数据
      tableData: [], // 表格数据
      dialog: { visible: false, title: '', type: '' },
      currentId: '', // 当前 item 的 id
      isPublishState: null,
      preview: false, // 预览弹出层,
      auditObj: { chkState: 1, chkRemarks: '' },
      auditDialog: false
    }
  },
  methods: {
    // 获取数据列表
    async getDataList (form) {
      let newForm = {}

      for (const k in form) {
        if (form[k] !== '') newForm = { ...newForm, [k]: form[k] }
      }
      const { data } = await getChoiceDataList(newForm)
      this.counts = data.counts
      data.items.forEach((v) => {
        // 难度
        this.difficulty.forEach((item) => {
          if (item.value === v.difficulty - 0) {
            v.difficulty = item.label
          }
        })
        // 类型
        this.questionType.forEach((item) => {
          if (item.value === v.questionType - 0) {
            v.questionType = item.label
          }
        })
        /* 已发布 已发布 === 1
         * 已下架 已发布 === 0 && 待审核 === 1
         * 待发布 已发布 === 0 && 待审核 !== 1
         */
        v.publishState =
          v.publishState === 1
            ? '已发布'
            : v.publishState === 0 && v.chkState === 1
              ? '已下架'
              : '待发布'

        v.chkState =
          v.chkState === 0
            ? '待审核'
            : v.chkState === 1
              ? '已审核'
              : v.chkState === 2
                ? '已拒绝'
                : '未知'
      })
      this.tableData = data.items
    },
    // 学科列表
    async getCourseList () {
      const { data } = await getSubjectList()
      this.subjectList = data
    },
    // 二级目录
    async getSecondaryDirectory () {
      const { subjectID } = this.formData
      const { data } = await getDirectoryList({ subjectID })
      this.secondaryDirectoryListing = data
    },
    // 标签
    async getTagsList () {
      const { data } = await getTagsList()
      this.tagsList = data
    },
    // 录入人
    async getUserList () {
      const { data } = await getUserList()
      this.userList = data
    },
    // 页数发生变化时
    handleSizeChange (pagesize) {
      this.formData.pagesize = pagesize
      this.getDataList({ page: this.formData.page, pagesize })
    },
    // 当前页发生变化时
    handleCurrentChange (page) {
      this.formData.page = page
      this.getDataList({ page, pagesize: this.formData.pagesize })
    },
    // 搜索
    searchBtn () {
      this.getDataList(this.formData)
    },
    // 删除
    remove () {
      this.formData = {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: '', // 学科 id
        catalogID: '', // 目录 id
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        chkState: '' // 0 待审核 1 通过 2 拒绝 核状态
      }
    },
    // 已发布删除
    deleteItem (id) {
      this.dialog = {
        visible: true,
        title: '此操作将永久删除该题目, 是否继续?',
        type: 'warning'
      }
      this.currentId = id
      this.isPublishState = null
    },
    // 上架
    shelvesFn (id, falg) {
      this.dialog = {
        visible: true,
        title: `您确认${falg === '已发布' ? '下架' : '上架'}这道题目吗?`,
        type: 'warning'
      }
      this.currentId = id
      this.isPublishState = falg === '已发布' ? 0 : 1
      console.log(this.isPublishState)
    },
    // 确定
    dialogPerform () {
      if (this.isPublishState === null) {
        // 删除
        remove({ id: this.currentId }).then(({ data }) => {
          this.$message({
            message: data.success ? '删除成功' : '删除失败',
            type: data.success ? 'success' : 'error'
          })
          this.getDataList({
            page: this.formData.page,
            pagesize: this.formData.pagesize
          })
        })
      } else {
        choicePublish({
          id: this.currentId,
          publishState: this.isPublishState
        }).then(({ data }) => {
          this.$message({
            message: data.success
              ? this.isPublishState
                ? '上架成功'
                : '下架成功'
              : '操作失败',
            type: data.success ? 'success' : 'error'
          })
          this.getDataList({
            page: this.formData.page,
            pagesize: this.formData.pagesize
          })
        })
      }
      this.dialog = { visible: false, title: '', type: '' }
    },
    // 取消
    dialogClose () {
      this.dialog = { visible: false, title: '', type: '' }
    },
    // 页面切换
    handleClick (tab) {
      this.formData.chkState =
        tab.name === '待审核'
          ? 0
          : tab.name === '通过'
            ? 1
            : tab.name === '拒绝'
              ? 2
              : ''
      this.getDataList({
        page: this.formData.page,
        pagesize: this.formData.pagesize,
        chkState: this.formData.chkState
      })
    },
    // 待审核
    async auditFn () {
      const { data } = await choiceCheck({
        ...this.auditObj,
        id: this.currentId
      })

      this.$message({
        message: data.success ? '审核成功' : '操作失败',
        type: data.success ? 'success' : 'error'
      })
      this.getDataList(this.formData)
      this.auditDialog = false
      this.auditObj = { chkState: 1, chkRemarks: '' }
    },
    handleClose () {
      this.auditDialog = false
      this.auditObj = { chkState: 1, chkRemarks: '' }
    }
  },
  computed: {},
  watch: {
    formData: {
      deep: true,
      handler () {
        this.getSecondaryDirectory()
        this.provincesSY.forEach((v) => {
          if (v.city === this.formData.province) {
            this.citys = v.area
          }
        })
      }
    }
  },
  created () {
    this.getDataList({
      page: this.formData.page,
      pagesize: this.formData.pagesize
    })
    this.getCourseList()
    this.getTagsList()
    this.getUserList()
  }
}
</script>

<style scoped>
.questions {
  margin: 10px;
}
.top_title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.top_title span {
  font-size: 12px;
  color: pink;
}
.w200 {
  width: 200px;
}
.el-textarea {
  margin-top: 20px;
}
.auditDialog /deep/ .el-dialog__footer {
  text-align: right;
}
.el-link {
  margin-right: 8px;
}
.whiteBGC {
  background-color: #fff;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.left156 {
  margin-left: 156px;
}
.el-select {
  width: 95px;
}

.flex50 /deep/ .el-form-item__content {
  display: flex;
  justify-content: space-between;
  width: 200px;
}
.table_btn {
  font-size: 12px;
  display: inline-block;
  margin-right: 10px;
}
</style>
